<template>
    <div>
        <div
            class="
                fixed
                bottom-80px
                right-0
                rounded
                shadow-lg
                bg-warm-gray-50
                flex flex-col
                justify-center
                items-center
                cursor-default
                text-sm
                h-140px
                w-30px
            "
            @mouseenter="show = true"
            @mouseleave="show = false"
        >
            <i class="el-icon-question text-lg text-blue-500 mb-1"></i>
            <div>在</div>
            <div>线</div>
            <div>客</div>
            <div>服</div>
        </div>
        <div
            class="
                fixed
                bottom-50px
                right-33px
                rounded
                shadow-lg
                bg-warm-gray-50
                w-160px
                p-2
                flex flex-col
                items-center
                divide-y divide-gray-400
            "
            v-if="show"
        >
            <div class="flex flex-col justify-center items-center pb-2">
                <img class="flex-none" src="/static/kfqrcode.png" />
                <div class="text-xs">微信扫一扫联系我们</div>
            </div>
            <div class="flex flex-col justify-center items-center">
                <div class="flex-1 font-bold flex items-center">4009-965-101</div>
                <div class="text-xs">电话联系我们</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
        };
    },
};
</script>

<style>
</style>